<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-form size="small" label-width="70px" v-formkey="{query:toQuery}">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="业务日期">
                <div class="flex flex-row">
                  <el-date-picker
                    v-model="query.startDate"
                    align="right"
                    unlink-panels
                    style="width: 50%"
                    format="yyyy - MM - dd "
                    value-format="yyyy-MM-dd"
                    default-value
                    range-separator=""
                    placeholder="开始日期"
                  />
                  <el-date-picker
                    v-model="query.endDate"
                    align="right"
                    unlink-panels
                    style="width: 50%"
                    format="yyyy - MM - dd "
                    value-format="yyyy-MM-dd"
                    default-value
                    range-separator=""
                    placeholder="结束日期"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4">
              <el-form-item label="单号编号">
                <el-input v-model="query.code" placeholder="输入编码进行搜索" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="客户名称">
                <table-select
                  :tableColumns="[
                    { prop: 'code', label: '客户编码', width: '100' },
                    { prop: 'name', label: '客户名称', width: '150' },
                    { prop: 'address', label: '地址' },
                    { prop: 'sCustomerName', label: '二批' },
                  ]"
                  labelKey="name"
                  valueKey="id"
                  width="700"
                  :value.sync="query.customerIds"
                  placeholder="请选择客户"
                  url="api/dropDown/basCustomerList"
                ></table-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="区域" prop="customerAreaId">
                <TreeSelect
                  v-model="query.customerAreaIds"
                  :options="areaList"
                  style="width: 100%"
                  placeholder="区域"
                  :normalizer="normalizer"
                  multiple
                  @input="getArea"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="6">
              <el-form-item label="部门">
                <TreeSelect
                  v-model="query.deptIds"
                  :options="deptList"
                  placeholder="部门"
                  style="width: 100%"
                  :normalizer="normalizer"
                  multiple
                  @input="(val) => getNoStr(val, 'deptList', 'deptIds')"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="业务员">
                <table-select
                  :tableColumns="[
                    { prop: 'name', label: '业务员名称', width: '280' },
                  ]"
                  :value.sync="query.userIds"
                  placeholder="请选择业务员"
                  url="/api/dropDown/sysUserList"
                ></table-select>
              </el-form-item>
            </el-col>
            <!--            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">-->
            <!--              <el-form-item label="业务日期">-->
            <!--                <el-date-picker-->
            <!--                  v-model="query.busDate"-->
            <!--                  type="date"-->
            <!--                  size="small"-->
            <!--                  class="date-item"-->
            <!--                  style="width: 100%;"-->
            <!--                  format="yyyy - MM - dd"-->
            <!--                  value-format="yyyy-MM-dd"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-button
                class="filter-item"
                size="mini"
                type="primary"
                @click="queryReport"
                >搜索</el-button
              >
              <el-button
                class="filter-item"
                plain
                size="mini"
                type="primary"
                @click="crud.resetQuery()"
                >重置</el-button
              >
              <!--              <rrOperation :crud="crud"/>-->
            </el-col>
          </el-row>
        </el-form>
      </div>
      <crudOperation />
      <vue-context-menu
        :contextMenuData="contextMenuData"
        @tableConfig="tableConfig"
        @deletedata="deletedata"
      ></vue-context-menu>
      <el-dialog title="表格配置" :visible.sync="tableConfigShow" width="60%">
        <j-table-column-config :columns.sync="header" @tabSave="saveHead" />
      </el-dialog>
      <!--表格渲染-->
      <el-table
        @row-dblclick="onMapShow"
        @row-click="crud.selectRow"
        @contextmenu.native="showMenu"
        :row-style="crud.rowClass"
        v-draghead="manyTableOption"
        :row-class-name="crud.tableRowClassName"
        height="calc( 100vh - 340px )"
        ref="table"
        stripe
        border
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column
          :render-header="crud.renderHeader"
          type="selection"
          width="60"
          align="center"
        />
        <el-table-column
          :render-header="crud.renderHeader"
          type="index"
          width="60"
          label="序号"
        />
        <el-table-column
          v-if="item.visible"
          v-for="(item, index) in header"
          :key="`col_${index}`"
          :prop="item.prop"
          :label="columnLabel(item)"
          :width="item.width + 'px'"
          @header-dragend="changeColWidth"
          ><template slot-scope="{ row, $index }"
            ><span v-if="item.type == 1">{{ row[`${item.prop}`] }}</span
            ><span v-else-if="item.type == 2">{{
              parseTime(row[`${item.prop}`])
            }}</span
            ><span v-else-if="item.type == 3">{{
              getDict(`this.dict.label.${item.dictionary}[${row[item.prop]}]`)
            }}</span
            ><span v-else-if="item.type == 4"
              ><span v-if="item.prop == 'busDate'">
                <span>{{ parseTime(row.busDate) }}</span> </span
              ><span v-else-if="item.prop == 'location'">
                <el-button type="text" @click="onMapShow(row, 0)"
                  >查看</el-button
                > </span
              ><span v-else-if="item.prop == 'photoTime'">
                <span>{{ parseTime(row.photoTime) }}</span> </span
              ><span v-else-if="item.prop == 'createTime'">
                <span>{{ parseTime(row.createTime) }}</span> </span
              ><span v-else-if="item.prop == 'updateTime'">
                <span>{{ parseTime(row.updateTime) }}</span>
              </span>
              <span v-else-if="item.prop == 'doorwayPhotoUrl'">
<el-image v-if="row.doorwayPhotoUrl" :preview-src-list="[row.doorwayPhotoUrl]" :src="row.doorwayPhotoUrl" style="width: 100px;height: 100px;" />
              </span>
        </span
            >
          </template>
        </el-table-column>
      </el-table>

      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('id')" prop="id" label="id" />&ndash;&gt;-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('busDate')" prop="busDate" label="业务日期">-->
      <!--          <template slot-scope="scope">-->
      <!--            <span>{{ parseTime(scope.row.busDate) }}</span>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('weekDay')" prop="weekDay" label="星期" />-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerId')" prop="customerId" label="客户id" />&ndash;&gt;-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('pCustomerId')" prop="pCustomerId" label="所属总店id" />&ndash;&gt;-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('pCustomerCode')" prop="pCustomerCode" label="所属总店编码" />&ndash;&gt;-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('pCustomerName')" prop="pCustomerName" label="所属总店名称" />-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('mCustomerId')" prop="mCustomerId" label="所属商场id" />&ndash;&gt;-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('mCustomerCode')" prop="mCustomerCode" label="所属商场编码" />&ndash;&gt;-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('mCustomerName')" prop="mCustomerName" label="所属商场名称" />-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerAreaId')" prop="customerAreaId" label="客户区域id" />&ndash;&gt;-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerAreaCode')" prop="customerAreaCode" label="客户区域编码" />&ndash;&gt;-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerAreaName')" prop="customerAreaName" label="客户区域名称" />-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('deptId')" prop="deptId" label="部门id" />&ndash;&gt;-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('deptCode')" prop="deptCode" label="部门编码" />&ndash;&gt;-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('deptName')" prop="deptName" label="部门名称" />-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('goodsBrandId')" prop="goodsBrandId" label="商品品牌id" />&ndash;&gt;-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('goodsBrandCode')" prop="goodsBrandCode" label="商品品牌编码" />&ndash;&gt;-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('goodsBrandName')" prop="goodsBrandName" label="商品品牌名称" />-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('commonClbz')" prop="commonClbz" label="陈列标准 1整齐划一2前排展示3合格" />&ndash;&gt;-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('szmc')" prop="szmc" label="设置名称" />&ndash;&gt;-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('location')" prop="location" label="坐标">-->
      <!--          <template slot-scope="scope">-->
      <!--            <el-button type="text" @click="onMapShow(scope.row,0)">查看</el-button>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('photoTime')" prop="photoTime" label="拍照时间">-->
      <!--          <template slot-scope="scope">-->
      <!--            <span>{{ parseTime(scope.row.photoTime) }}</span>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('visitMinute')" prop="visitMinute" label="拜访时长分钟" />-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('remark')" prop="remark" label="备注" />-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('createUserId')" prop="createUserId" label="添加人id" />-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('createUserCode')" prop="createUserCode" label="添加人编码" />&ndash;&gt;-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('createUserName')" prop="createUserName" label="添加人名称" />-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('createTime')" prop="createTime" label="添加时间">-->
      <!--          <template slot-scope="scope">-->
      <!--            <span>{{ parseTime(scope.row.createTime) }}</span>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('updateUserId')" prop="updateUserId" label="修改人id" />&ndash;&gt;-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('updateUserCode')" prop="updateUserCode" label="修改人编码" />&ndash;&gt;-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('updateUserName')" prop="updateUserName" label="修改人名称" />-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('updateTime')" prop="updateTime" label="修改时间">-->
      <!--          <template slot-scope="scope">-->
      <!--            <span>{{ parseTime(scope.row.updateTime) }}</span>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('code')" prop="code" label="单号编码" />-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('userId')" prop="userId" label="客户业务员id" />&ndash;&gt;-->
      <!--        &lt;!&ndash;<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('userCode')" prop="userCode" label="客户业务员code" />&ndash;&gt;-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('userName')" prop="userName" label="客户业务员名称" />-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerCode')" prop="customerCode" label="客户code" />-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerName')" prop="customerName" label="客户名称" />-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerTypeId')" prop="customerTypeId" label="客户分类id" />-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerTypeCode')" prop="customerTypeCode" label="客户分类编码" />-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerTypeName')" prop="customerTypeName" label="客户分类名称" />-->
      <!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('address')" prop="address" label="地址" />-->
      <!--      </el-table>-->

      <!--分页组件-->
      <pagination />
    </div>
    <MapShow
      v-if="centerDialogVisible"
      @onCenterDialogVisible="onCenterDialogVisible"
      :centerDialogVisible="centerDialogVisible"
      :onGPSRow="onGPSRow"
    />
    <CrmCusVisitView
      :crud="crud"
      v-if="centerDialogVisible1"
      @onCenterDialogVisible="onCenterDialogVisible"
      :centerDialogVisible="centerDialogVisible1"
      :id="id"
    />
  </div>
</template>

<script>
import crudCustomerVisitRecord from "@/api/erp/customerVisitRecord";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";
import { getAreaTree } from "@/api/erp/basCustomerArea";
import { getDepts } from "@/api/system/dept";
import TreeSelect from "@riophae/vue-treeselect";
import MapShow from "./components/map";
import CrmCusVisitView from "./components/crmCusVisitView";
import { manyTableMixin } from "../../../mixins/manyTableMixin";
import jTableColumnConfig from "@/components/jTableColumnConfig/jTableColumnConfig";
import { publicListKey } from "@/utils/key";
// import {getCustomerVisitRecord} from '@/api/erp/customerVisitRecord'

// crud交由presenter持有
const defaultCrud = CRUD({
  title: "客户拜访计划",
  url: "api/customerVisitRecord",
  sort: "id,desc",
  optShow: {
    add: false,
    edit: false,
    del: false,
    download: true,
    leadingIn: false,
    enable: false,
    disable: false,
  },
  props: {
    //在这里配置要显示的字段
    tableColumns: [
      "code",
      "busDate",
      "weekDay",
      "userId",
      "userName",
      "mCustomerName",
      "pCustomerName",
      "customerAreaName",
      "deptName",
      "url",
      "gps",
      "createStartTime",
      "createEndTime",
      "goodsBrandName",
      "remark",
      "photoTime",
      "commonCheckStatus",
      "visitMinute",
      "userName",
    ],
  },
  crudMethod: { ...crudCustomerVisitRecord },
});
const defaultForm = {
  code: null,
  customerId: null,
  customerAreaId: null,
  deptList: [],
  userId: null,
};
export default {
  name: "customerVisitRecord",
  components: {
    pagination,
    crudOperation,
    rrOperation,
    udOperation,
    TreeSelect,
    MapShow,
    CrmCusVisitView,
    jTableColumnConfig,
  },
  mixins: [
    presenter(defaultCrud),
    header(),
    form(defaultForm),
    crud(),
    manyTableMixin,
    publicListKey,
  ],
  data() {
    return {
      valueTime: [],
      depts: [],
      areaList: [],
      areaData: [],
      onGPSRow: [],
      centerDialogVisible: false,
      centerDialogVisible1: false,
      id: null,
      rules: {
        id: [{ required: true, message: "id不能为空", trigger: "blur" }],
        busDate: [
          { required: true, message: "业务日期不能为空", trigger: "blur" },
        ],
        weekDay: [{ required: true, message: "星期不能为空", trigger: "blur" }],
        customerId: [
          { required: true, message: "客户id不能为空", trigger: "blur" },
        ],
      },
    };
  },
  watch: {},
  created() {
    this.getDepts();
    this.getAreaList();
  },
  methods: {
    getArea(val) {
      let str = "";
      console.log(this.areaList);
      val.forEach((item) => {
        const itemNode = this.getTreeName(this.areaList, item);
        str = this.getNode(itemNode, str);
      });
      this.query.customerAreaIds = str;
    },
    queryReport() {
      this.crud.toQuery();
    },
    onMapShow(event, tab) {
      //点击弹出地图
      if (tab === 0) {
        this.centerDialogVisible = true;
        this.onGPSRow = event;
      } else {
        this.id = event.id;
        this.centerDialogVisible1 = true;
      }
    },
    onCenterDialogVisible(tab) {
      //点击关闭地图
      if (tab === 0) {
        this.centerDialogVisible = false;
      } else {
        this.centerDialogVisible1 = false;
      }
    },
    normalizer(node) {
      //去掉children=[]的children属性
      if (node.children == null || node.children.length == 0) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
    getNoStr(val, type, prop) {
      let str = "";
      val.forEach((item) => {
        const itemNode = this.getTreeName1(this[type], item);
        str = this.getNode(itemNode, str);
      });
      this.query[prop] = str;
    },
    getTreeName1(treeList, id) {
      let _this = this;
      for (let i = 0; i < treeList.length; i++) {
        let treeItem = treeList[i];
        if (treeItem.id === id) {
          return treeItem;
        } else {
          if (treeItem.children && treeItem.children.length > 0) {
            let res = _this.getTreeName(treeItem.children, id);
            if (res) {
              return res;
            }
          }
        }
      }
    },
    getTreeName(treeList, id) {
      let _this = this;
      for (let i = 0; i < treeList.length; i++) {
        let treeItem = treeList[i];
        if (treeItem.id === id) {
          return treeItem;
        } else {
          if (treeItem.children && treeItem.children.length > 0) {
            let res = _this.getTreeName(treeItem.children, id);
            if (res) {
              return res;
            }
          }
        }
      }
    },
    getNode(node, str) {
      if (node.children) {
        for (let i = 0; i < node.children.length; i++) {
          str = this.getNode(node.children[i], str);
        }
      }
      return (str += node.id + ",");
    },
    getAreaList() {
      //区域
      getAreaTree().then((res) => {
        this.areaData = res;
        this.areaList = res;
      });
    },
    getDepts() {
      //部门
      getDepts({ status: 1 }).then((res) => {
        this.deptList = res;
      });
    },
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {},
  },
};
</script>

<style scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
</style>
